<template>
  <div class="allshop-box">
    <nav-com
      title="所有店铺"
      :showView="showView"
      @back="backHandler()"
    ></nav-com>
    <div class="box-list">
      <div class="list-item" v-for="(item, index) in shopList" :key="index">
        <div class="list-item-top">
          <div class="left">
            <div class="author-img" @click="toeditShop(item.id)">
              <img :src="item.avatar" />
            </div>
            <div class="shop-info">
              <div class="name">{{ item.shopname }}</div>
              <div class="info">
                <img src="@/assets/shop/star.png" />
                {{ item.description }}
              </div>
            </div>
          </div>
          <div class="right" @click="toshopdetail(item)">进店</div>
        </div>
        <div class="list-item-imgs">
          <div
            class="item-imgs"
            v-for="(item2, index2) in item.goods"
            :key="index2"
            @click="handerDetails(item2.id)"
          >
            <img :src="item2.image" class="img" />
            <div class="price">{{ item2.price }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shoplist } from "@/api/api";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Popup, Toast } from "vant";
import { Icon } from "vant";
import Upgrade from "@/component/upgrade.vue";

export default {
  name: "index",
  components: {
    navCom,
    Loading,
    Upgrade,
  },
  data() {
    return {
      showView: true,
      LOADING: true,
      show: false,
      showTip: false,
      shopList: [],
    };
  },
  mounted() {
    this.getshoplist();
  },
  methods: {
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    getshoplist() {
      shoplist()
        .then((result) => {
          if (result.data.code == 1) {
            this.shopList = result.data.data.data;
          }
        })
        .catch((err) => {});
    },
    toshopdetail(data) {
      this.$router.push({ name: "allshopgoods", params: { id: data.id } });
    },
    //跳转详情
    handerDetails(id) {
      this.$router.push({
        name: "sharegoodDetails",
        params: { id: id, from: "shop" },
      });
    },
    toeditShop(id) {
      this.$router.push({ name: "editShop", params: { id: id } });
    },
  },
};
</script>
<style scoped>
.allshop-box {
  background: #f8f8f8;
  min-height: 100vh;
  overflow-y: scroll;
  padding-bottom: 20px;
}
.box-list .list-item {
  background: #ffffff;
  margin: 10px 12px 0;
  border-radius: 6px;
  padding: 10px;
  min-height: 150px;
}
.list-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.list-item-top .right {
  width: 60px;
  height: 26px;
  background: #fb7647;
  border-radius: 15px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 26px;
  text-align: center;
}
.list-item-top .left {
  display: flex;
  align-items: center;
}
.list-item-top .left .author-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-right: 6px;
}
.author-img img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.shop-info .name {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 550;
  color: #222222;
  line-height: 25px;
  margin-bottom: 8px;
}
.shop-info .info {
  font-size: 11px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #949391;
  line-height: 16px;
  display: flex;
  align-items: center;
}
.shop-info .info img {
  width: 16px;
  margin-right: 5px;
}
.list-item-imgs {
  display: flex;
}
.item-imgs {
  margin-right: 10px;
  position: relative;
  width: 33%;
}
.item-imgs .img {
  width:100%;
  height: 80px;
}
.item-imgs .price {
  width: 41px;
  height: 19px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 19px;
  text-align: center;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>